// 详情页逻辑

// 0. 获取元素
const infoBox = document.querySelector('.box')
const detailBox = document.querySelector('.detail')
const textBox = document.querySelector('.text')

// 1. 拿到 sessionStorage 内的 id 信息
const goodsId = window.sessionStorage.getItem('goods_id')

console.log(goodsId);

// 2. 根据 goodsId 去请求商品详情
getGoodsInfo()
async function getGoodsInfo() {

    const res = await pAjax({
    url: 'http://localhost:8888/goods/item',
    data: `id=${goodsId}`,
    dataType: 'json',
    })

    console.log(res)

    // 渲染页面
    infoBox.innerHTML = `
    <div class="list">
                <button class="ttop iconfont icon-chevron-thin-up"></button>
                <ul>
                    <li class="active"> <img src="${ res.info.img_big_logo}"
                        data-show="${ res.info.img_big_logo}"
                        data-enlarge="${ res.info.img_big_logo}"
                        alt="">
                    </li>
                    <li> <img src="https://www.uniqlo.cn/hmall/test/u0000000027884/main/other1/1000/2.jpg"
                        data-show="https://www.uniqlo.cn/hmall/test/u0000000027884/main/other1/1000/2.jpg"
                        data-enlarge="https://www.uniqlo.cn/hmall/test/u0000000027884/main/other1/1000/2.jpg"
                        alt="">
                    <li> <img src="https://www.uniqlo.cn/hmall/test/u0000000027884/main/first/1000/1.jpg"
                        data-show="https://www.uniqlo.cn/hmall/test/u0000000027884/main/first/1000/1.jpg"
                        data-enlarge="https://www.uniqlo.cn/hmall/test/u0000000027884/main/first/1000/1.jpg"
                        alt="">
                    <li> <img src=""
                        data-show=""
                        data-enlarge=""
                        alt="">
                    <li> <img src=""
                        data-show=""
                        data-enlarge=""
                        alt="">
                </ul>
                <button class="bbot iconfont icon-chevron-thin-down"></button>
            </div>
    <div class="cent_box">
                <div class="lef iconfont icon-chevron-thin-left"></div>

                <div class="pic">
                    <img src="${ res.info.img_big_logo}" alt="">

                    <div class="cursor"></div>
                </div>
                <div class="rig iconfont icon-chevron-thin-right"></div>
            </div>
    <div class="text">
        <div class="enlarge">

        </div>
        <p class="tit">${ res.info.title }</p>
        <div class="price">
            <span class="price_now">￥${ res.info.current_price }</span>
            <span class="price_start">初始上市价格:
                <span>￥${ res.info.price }</span>
            </span>
        </div>
        <p class="col">颜色：</p>
        <ul class="bobo">
            <li><img src="https://www.uniqlo.cn/hmall/test/u0000000027884/chip/22/COL09.jpg" alt=""></li>
            <li><img src="https://www.uniqlo.cn/hmall/test/u0000000027884/chip/22/COL25.jpg" alt=""> </li>
            <li><img src="https://www.uniqlo.cn/hmall/test/u0000000027884/chip/22/COL35.jpg" alt=""> </li>
            <li><img src="https://www.uniqlo.cn/hmall/test/u0000000027884/chip/22/COL57.jpg" alt=""> </li>
            <li><img src="https://www.uniqlo.cn/hmall/test/u0000000027884/chip/22/COL69.jpg" alt=""> </li>
        </ul>
        <div class="num">
            <span class="num_tit">数量:</span>
            <div>
                <button class="numAdd" data-id="${ res.info.goods_id }">+</button>
                <input type="text" value="1">
                <button class="numSub" data-id="${ res.info.goods_id }">-</button>
            </div>
            <span class="inventory">库存 : ${ res.info.goods_number }</span>
        </div>
        <div>
            <button class="buy">立即购买</button>
            <button class="car iconfont icon-gouwuche"> 添加至购物车</button>
        </div>
    </div>
    `


    const e = new Enlarge('#box')

}
